<template>
	<view class="setselfinfo">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'设置'"></Hearder>
		<!-- #endif -->
		<view class="bgbottom">
			<view class="authentication" @click="toPage('information')">
				<view class="left">个人信息</view>
				<view class="right">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="authentication" @click="toPage('setpwd')">
				<view class="left">交易密码</view>
				<view class="right">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="authentication" @click="show=true">
				<view class="left">清除缓存</view>
				<view class="right">
					<text>{{cacheSize}}</text>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<!-- #endif -->
			<view class="authentication">
				<view class="left">所属空间号</view>
				<view class="right">
					<text>{{userinfo.space_no}}</text>
				</view>
			</view>
			<view class="authentication" style="border: none;" @click="toPage('/pages/login/userserver?ll=5')">
				<view class="left">关于我们</view>
				<view class="right">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="sub" @click="signOut">退出登录</view>
		<u-modal
		:show="show" 
		:content="content" 
		title="清理缓存" 
		width="260"
		border-radius="0"
		:show-cancel-button="true"
		confirm-text="清理"
		cancel-color="#323232"
		confirm-color="#323232"
		:title-style="{'font-size':'32rpx','font-weight': '800'}"
		:content-style="{color:'#999','font-size':'28rpx'}"
		:cancel-style="{'border-right': '2rpx solid $uni-background-color'}"
		@confirm="clearCache"
		@cancel="cancel">
		</u-modal>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				phone:'',
				userinfo:{},
				showLogin:false,
				show:false,
				cacheSize:'',
				show: false,
				content: '',
			}
		},
		onLoad() {
			this.getinit()
			// #ifdef APP-PLUS
			var self = this;
			plus.cache.calculate(function(size) { //size是多少个字节单位是b
			    //做下面相应的处理
			    if (size < 1024) {
			        self.cacheSize = size + 'B';
			    } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
			        self.cacheSize = Math.floor(size / 1024 * 100) / 100 + 'KB';
			    } else if (size / 1024 / 1024 >= 1) {
			        self.cacheSize = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
			    }
				self.content = "是否清理缓存" +self.cacheSize
			});
			// #endif
		},
		methods:{
			// 退出登录
			signOut(){
				uni.removeStorageSync('TOKEN')
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getinit(){
				this.request('/member/getMemberDetails').then(res => {
					if(res.data.code==-500){
						this.showLogin=true
					}
					if(res.data.code==1){
						this.userinfo=res.data.data
					}
				})
			},
			cancel(){
				this.show = false
			},
			clearCache() {
			    // #ifdef APP-PLUS
			    var self = this;
				self.show = false
			    //使用plus.cache.clear 清除应用中的缓存数据
			    plus.cache.clear(function() {
			        uni.showToast({
			            title: '清除成功!',
			            icon: 'none',
			            success() {
			                self.cacheSize = '0B'
							self.content = "是否清理缓存" +self.cacheSize
			            }
			        })
			    });
			    // #endif
			},
			loginhidden(data){
				this.showLogin=data
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.setselfinfo{
		min-height: 100%;
		/deep/ .head{
			border-bottom: 2rpx solid $uni-background-color;
		}
		.sub{
			width: 92%;
			margin: 60rpx 4% 0;
			line-height: 88rpx;
			height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
			border-radius: 6rpx;
			background: $uni-item-color;
		}
		.authentication{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 4%;
			height: 99rpx;
			line-height: 99rpx;
			border-bottom: 2rpx solid $uni-background-color;
			.right{
				.u-icon{
					right: -10rpx;
				}
				.uploadimg{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>